<template>
  <div class="dy-main EAccountMessageSure">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">绑定银行卡</x-header>
    </div>
    <div class="dy-body">
      <div class="IdPhoto" @click="getData">
        <zx-fileImg v-model="imga" :img="imga" title="银行卡正面照">
        </zx-fileImg>
      </div>
      <p>{{resultFlag}}</p>
      <div class="groupInput" v-show="isPicOk">
        <group title="">
          <cell title="银行卡号" :value="returnData.cardNumber"></cell>
          <x-input title="预留手机号" placeholder="请输入手机号码"  v-model="eaccountData.mobile.val" label-width="2.05rem"></x-input>
          <zx-smscode :sendObj="smsSendObj1" @send-mobile="getSmsMobile" v-model="eaccountData.smsCode.val" title="验证码" label-width="2.2rem" ></zx-smscode>
          <x-input title="交易密码" type="text" placeholder="请输入密码" v-model="eaccountData.password.val" @on-change="change" label-width="2.05rem" @on-focus="inputSms"></x-input>
        </group>
        <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask :text="errormsg" position="middle">{{ errormsg }}</toast>
        <div class="deal" @click='dealClick'>
          <div class='select'><img src="../../assets/img/Financial/selected.png" alt="" v-show="deal"></div>
          <p>本人已阅读同意<a href="javascript:void(0)" class="dealCheck" @click="tipsShow = 1">《风险提示书》</a>服务协议</p>
        </div>
        <div class="surebtn">
          <x-button class="subBtn"  @click.native="toEAccountOpenSucces" type="primary" action-type="button">{{buttonTxt}}</x-button>
        </div>
      </div>
    </div>
    <zx-dialog v-model="tipsShow" type="tips" butType="button" :data="['确认']" @on-click-yes="clickYes">
      <div slot="body" class="tips">
        本产品为非保本浮动收益型理财产品，我行并不承诺您得本今安全和收益保障，您得本金将可能受到市场变动等因素的影响而蒙受损失。我行代
      </div>
    </zx-dialog>
    <popup v-model="downPop" position="bottom" max-height="50%">
      <ul>
        <li>拍摄</li>
        <li>从手机相册选择</li>
        <li @click="downPop = false">取消</li>
      </ul>
    </popup>
  </div>
</template>

<script>

export default {

  data () {
    return {
      clickOne: false, // 防重点击
      resultFlag: '', // 提交开户信息后返回的状态 0---成功
      hong: '',
      downPop: false,
      isPicOk: false, // 判断照片是否拍摄完成
      imga: require('../../assets/img/upfileimg.png'),
      tipsShow: 0,
      returnData: {
        cardImg: '', // 银行卡正面照
        cardNumber: '', // 银行卡或者信用卡卡号
        cardHoldername: 'wanglulu', // 信用卡持卡人
        cardValidThru: '', // 信用卡有效期
        cardInsName: '', // 发卡机构
        cardInsId: '', // 发卡机构代码
        bankCardType: '', // 银行卡类型
        creditCardType: '', // 信用卡类型
        cardNo: '6210 9855 9000 047' // 银行卡号
      },
      IDmssg: {},
      eaccountData: {
        mobile: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '预留手机号不能为空'}]},
        smsCode: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '验证码不能为空'}]},
        password: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '密码不能为空'}]}
      },
      buttonTxt: '提交',
      maskValue: '123456',
      deal: 1, // 控制勾选框
      password: '',
      password2: '',
      userPas: '', // 验证码
      codeText: '发送验证码', // 验证按钮显示内容
      codeTime: 10, // 验证码倒计时
      isTime: null, // 验证码状态
      errormsg: '',
      showPositionValue: false,
      photoReturn: {}, // 取回vuex上保存的身份证图片
      smsSendObj1: {
        'bussType': '13',
        'sendFlag': '2',
        'clientNo': this.$store.getters.getClientNo,
        'mobile': this.eaccountData.mobile.val,
        'cardNo': this.returnData.cardNumber
      },
      smsMobile: ''
    }
  },
  computed: {
    getHongxin () {
      return this.$store.getters.getHongxin
    },
    getEAccountInfoType () {
      return this.$store.getters.getEAccountInfoType
    },
    getPhotoReturn () {
      return this.$store.getters.getIdPhoto
    }
  },
  methods: {
    inputSms () {
      this.showPayKeyboard()
    },
    clickYes () {
    },
    back () {
      this.$publicFun.goBack(this)
    },
    dealClick () { // 勾选框显示事件
      let n = this.deal
      if (n === 1) {
        this.deal = 0
      } else {
        this.deal = 1
      }
    },
    toEAccountOpenSucces: function () {
      if (this.clickOne) return true
      this.clickOne = true
      if (!this.checkSmscode()) return false
      if (this.deal === 1) {
        for (let key in this.eaccountData) {
          let lObj = this.eaccountData[key]
          let lRes = this.$publicFun.formCheck(lObj)
          if (!lRes.isOK) {
            this.errormsg = lRes.msg
            this.showPositionValue = true
            return false
          }
        }
      } else {
        this.errormsg = '请同意一下协议'
        this.showPositionValue = true
        return false
      }
      if (this.getHongxin) {
        this.onBang()
      } else {
        this.submitData()
      }
    },
    submitData () { // E账户开户接口
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'EAccountOpen', 'basic_Data': JSON.stringify({'cardType': this.getEAccountInfoType, 'branchCode': this.returnData.cardInsName, 'cardNo': this.returnData.cardNumber, 'bindBranch': '001', 'cardHolder': this.IDmssg.cardHolder, 'idNo': this.IDmssg.idNo, 'occupation': '10700', 'vocation': '6450', 'payPwd': '123456', 'pinYingXing': this.IDmssg.pinYingXing, 'pinYingMing': this.returnData.pinYingMing, 'address': this.returnData.address, 'mobile': this.eaccountData.mobile})}
        }),
        (response) => {
          // alert(response)
          this.resultFlag = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.resultFlag = rep.body.resultFlag
            this.$router.push({path: 'EAccountOpenSucces', query: {'acctNo': '6217298009765555', 'acctType': '身份证', 'cardNo': this.returnData.cardNumber, 'resultFlag': this.resultFlag}})
            this.$store.commit('setPhotoReturn', '') // 清除vuex里的图片缓存
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
            // this.$router.push({path: 'EAccountApprove'})
          }
          this.clickOne = false
        })
    },
    getData () {
      let lvm = this
      this.$bridge.callhandler('scanBankCard',
        JSON.stringify({
          'isNeedImg': '1'
        }),
        function (response) {
          // alert('返回' + JSON.stringify(response))
          // this.eaccountData = response.data[0]
          // response是响应数据
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            lvm.returnData = response.result
            lvm.imga = 'data:image/png;base64,' + lvm.returnData.cardImg
            lvm.isPicOk = true
            lvm.downPop = false
          } else {
            console.log('fail')
          }
        })
    },
    onBang () { // 绑定接口
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'BindingEAccountCard', 'basic_Data': JSON.stringify({'acctNo': '6229330496000066274', 'bindCard': this.returnData.cardNumber, 'bankCode': this.returnData.cardInsName, 'mobile': this.eaccountData.mobile.val, 'smsCode': '111111'})}
        }),
        (response) => {
          alert(response)
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.$router.push({path: 'EAccountBindcardResult', query: {'cardNo': this.returnData.cardNumber, 'cardInsName': this.returnData.cardInsName}})
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
          this.clickOne = false
        })
    },
    /*
     * 验证短信验证码
     */
    checkSmscode () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'checkCode', 'basic_Data': JSON.stringify({'bussType': '13', 'mobile': this.smsMobile, 'smsCode': this.eaccountData.smsCode.val})}
        }),
        (response) => {
          // alert(response)
          this.clickOne = false
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            return true
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
            return false
          }
        })
    },
    /*
    *  调用原生键盘
    */
    showPayKeyboard () {
      document.activeElement.blur()
      let _this = this
      this.$bridge.callhandler('showPayKeyboard', null,
        function (response) {
          response = JSON.parse(response)
          _this.eaccountData.password.val = '******'
          if (response.status === 0 || response.status === '0') {
          } else {
            console.log('fail')
          }
        })
    }
  },
  created () {
    // this.getData()
    // this.photoReturn = this.getPhotoReturn
    this.IDmssg = this.$route.query
  }
}
</script>
<style lang="less">
  .EAccountMessageSure {
    .IdPhoto{
      padding: 0.29rem 0.55rem;
    }
    .deal{
      margin-top: 0.48rem;
      margin-bottom: 0.45rem;
      padding-left: 0.3rem;
      overflow: hidden;
      .select{
        float: left;
        width: 0.28rem;
        height: 0.28rem;
        border: 1px solid #bfbfbf;
        margin-right:0.21rem;
        vertical-align: middle;
        &>img{
          width: 100%;
          height: AUTO;
        }
      }
      &>p{
        float: left;
        width:6.43rem;
        font-size:0.22rem;
        line-height: 0.35rem;
        color: #ccc;
        .dealCheck{
          color: #3333ff;
          text-decoration: none;
          font-size:0.22rem;
        }
      }
      &>i{
        float: left;
        margin-left: 0px;
        margin-right: 0.15rem;
        &>img{
          vertical-align: top;
          width: 100%;
          height: auto;
        }
      }
    }
    ul{
      overflow: hidden;
      background: #fff;
      li{
        line-height: 0.99rem;
        border-bottom: 1px solid #eaeaea;
        font-size: .26rem;
        color: #333;
        text-align: center;
      }
    }
    .surebtn {
      width:6.9rem;
      margin:0 auto;
    }
  }
</style>
